<template>
  <div class="head-left clearfix listBox">
    <div class="block01 float-l border mt05 ft height">
      <div>
        <div class="smallB01 float-l">
          <div class="posr-lt">
            <div>
              <icon v-for="config in undo" v-bind:config="config" :key="config.text"></icon>
            </div>
            <div>
              <icon v-for="config in redo" v-bind:config="config" :key="config.text"></icon>
            </div>
          </div>
        </div>
        <div class="smallB001 float-l">
          <div class="posr-lt">
            <icon v-for="config in paste" v-bind:config="config" :key="config.text"></icon>
          </div>
        </div>
        <div class="float-l smallB0001">
          <div class="posr-lt">
            <icon v-for="config in searchAndReplace" v-bind:config="config" :key="config.text"></icon>
          </div>
        </div>
        <div class="float-l smallB05">
          <div class="posr-lt">
            <icon v-for="config in format" v-bind:config="config" :key="config.text"></icon>
          </div>
        </div>
      </div>
    </div>
    <div class="block02 float-l border mt05 ft height">
      <div class="float-l" style="width:48%;margin-top:2px;">
        <div class="smallB0002 posr">
          <drop-icon v-bind:config="fontfamily"></drop-icon>
          <drop-icon v-bind:config="fontsize"></drop-icon>
          <color-icon v-bind:config="forecolor"></color-icon>
          <fontsize-list></fontsize-list>
          <fontfamily-list></fontfamily-list>
          <color-list></color-list>
        </div>
        <div class="smallB02 float-l">
          <icon v-for="config in fontTypes" v-bind:config="config" :key="config.text"></icon>
        </div>
        <div class="smallB2 float-l posr">
          <color-icon v-bind:config="backcolor"></color-icon>
        </div>
      </div>
      <div class="smallB004">
        <icon v-for="config in justify" v-bind:config="config" :key="config.text"></icon>
      </div>
      <div class="smallB005">
        <icon v-for="config in indent" v-bind:config="config" :key="config.text"></icon>
      </div>
      <!--行高-->
      <line-height></line-height>
      <div class="smallB002 float-l">
        <drop-icon v-bind:config="unordered"></drop-icon>
        <drop-icon v-bind:config="ordered"></drop-icon>
        <ordered-list v-bind:config="unorderedlist"></ordered-list>
        <ordered-list v-bind:config="orderedlist"></ordered-list>
      </div>
    </div>
    <div class="block03 float-l border mt05 ft height">
      <paragraph></paragraph>
      <fontstyle-list></fontstyle-list>
      <div class="smallB003 float-r hover" @click="showFontstyleList">
        <i></i>
      </div>
    </div>
    <div class="pull-right float-l mt05 block08">
      <icon v-bind:config="fullScreen"></icon>
    </div>
  </div>
</template>

<script>
  import ColorList from './ColorList'
  import DropIcon from './DropIcon'
  import Icon from './Icon'
  import ColorIcon from './ColorIcon'
  import OrderedList from './OrderedList'
  import FontfamilyList from './FontfamilyList'
  import FontsizeList from './FontsizeList'
  import LineHeight from './LineHeight'
  import Paragraph from './Paragraph'
  import FontstyleList from './FontstyleList'
  import {mapState, mapGetters, mapActions} from 'vuex'
  import {Observer, notFullScreen, toggleFullScreen} from '../../core/util'
  import {MessageBox, Message} from 'element-ui'

  export default {
    components: {
      ColorList,
      DropIcon,
      Icon,
      ColorIcon,
      OrderedList,
      FontfamilyList,
      FontsizeList,
      LineHeight,
      Paragraph,
      FontstyleList
    },
    created() {
      // 注册其他js文件传来的execCommand事件
      Observer.register('execCommand', function (param, notFocus) {
        if (!window.editorId) return Message({
          message: $.i18n('messager_need_to_focus'),
          type: 'warning'
        });
        var editor = UE.getEditor(window.editorId);
        editor.execCommand.apply(editor, param);
        if (!notFocus) {
          setTimeout(function () {
            editor.focus();
          }, 10);
        }
      });
    },
    data() {
      return {
        // 撤销、恢复、复制、剪切
        undo: [
          {
            text: $.i18n('toolbar_undo'),
            cmd: 'undo',
            query: 'state',
            showText: true,
          },
          {
            text: $.i18n('toolbar_copy'),
            cmd: 'copy',
            copyEvent: function () {
              Observer.fire('execCommand', ['copy']);
            },
            showText: true
          }
        ],
        redo: [
          {
            text: $.i18n('toolbar_redo'),
            cmd: 'redo',
            query: 'state',
            showText: true
          },
          {
            text: $.i18n('toolbar_cut'),
            cmd: 'cut',
            copyEvent: function () {
              Observer.fire('execCommand', ['inserthtml', UE.dom.domUtils.fillChar]);
            },
            showText: true
          }
        ],
        // 粘贴
        paste: [
          {
            text: $.i18n('toolbar_paste'),
            cmd: 'paste',
            showText: true
          }
        ],
        // 查找、替换
        searchAndReplace: [
          {
            text: $.i18n('toolbar_search'),
            cmd: 'search',
            isDialog: true,
            showText: true
          },
          {
            text: $.i18n('toolbar_replace'),
            cmd: 'replace',
            isDialog: true,
            showText: true
          }
        ],
        format: [
          {
            text: $.i18n('toolbar_removeformat'),
            cmd: 'clearformat',
            showText: true
          },
          {
            text: $.i18n('toolbar_formatpainter'),
            cmd: 'formatmatch',
            query: 'state',
            showText: true,
            classList: ['mt05']
          }
        ],
        // 字体类型
        fontTypes: [
          {
            text: $.i18n('toolbar_subscript'),
            cmd: 'subscript',
            query: 'state',
            classList: ['mt05']
          },
          {
            text: $.i18n('toolbar_superscript'),
            cmd: 'superscript',
            query: 'state',
            classList: ['mt05']
          },
          {
            text: $.i18n('toolbar_upsize'),
            cmd: 'upsize',
            classList: ['mt05']
          },
          {
            text: $.i18n('toolbar_downsize'),
            cmd: 'downsize',
            classList: ['mt05']
          },
          {
            text: $.i18n('toolbar_bold'),
            cmd: 'bold',
            query: 'state',
            classList: ['mt05']
          },
          {
            text: $.i18n('toolbar_italic'),
            cmd: 'italic',
            query: 'state',
            classList: ['mt05']
          },
          {
            text: $.i18n('toolbar_underline'),
            cmd: 'ins',
            query: 'state',
            classList: ['mt05']
          },
          {
            text: $.i18n('toolbar_strikethrough'),
            cmd: 'del',
            query: 'state',
            classList: ['mt05']
          }
        ],
        // 对齐方式
        justify: [
          {
            text: $.i18n('toolbar_justify_left'),
            cmd: 'justify',
            query: 'value',
            param: 'left',
            value: 'left',
          },
          {
            text: $.i18n('toolbar_justify_center'),
            cmd: 'justify',
            query: 'value',
            param: 'center',
            value: 'center',
          },
          {
            text: $.i18n('toolbar_justify_right'),
            cmd: 'justify',
            query: 'value',
            param: 'right',
            value: 'right',
          },
          {
            text: $.i18n('toolbar_justify_justify'),
            cmd: 'justify',
            query: 'value',
            param: 'justify',
            value: 'justify',
          }
        ],
        // 全屏
        fullScreen: {
          customCreated: function () {
            var self = this;
            document.onwebkitfullscreenchange = document.onmozfullscreenchange = document.onmsfullscreenchange = function () {
              var isNotFullScreen = notFullScreen(),
                index = self.config.imgClass.indexOf('editImg');
              if (isNotFullScreen) {
                self.config.text = $.i18n('toolbar_fullScreen');
                if (index > -1) self.config.imgClass.splice(index, 1);
              } else {
                self.config.text = $.i18n('toolbar_exitFullScreen');
                if (index === -1) self.config.imgClass.push('editImg');
              }
            };
          },
          customFn: function () {
            toggleFullScreen(document.body);
          },
          text: $.i18n('toolbar_fullScreen'),
          imgClass: ['iconfont', 'icon-fullscreen'],
          textClass: ['screenTxt'],
          showText: true,
          useIcon: true
        },
        unorderedlist: {
          cmd: 'insertunorderedlist',
          showList: 'showunorderedlist',
          classList: ['panel-content', 'posf', 'bo-bg'],
          list: [{
            name: $.i18n('toolbar_unordered_circle'),
            value: "circle"
          }, {
            name: $.i18n('toolbar_unordered_disc'),
            value: "disc"
          }, {
            name: $.i18n('toolbar_unordered_square'),
            value: "square"
          }]
        },
        orderedlist: {
          cmd: 'insertorderedlist',
          showList: 'showorderedlist',
          classList: ['panel-content', 'posf', 'bo-bg', 'ppanel-content'],
          list: [{
            name: "1., 2., 3., 4.,  ",
            value: "decimal"
          }, {
            name: "a., b., c., d.,  ",
            value: "lower-alpha"
          }, {
            name: "i., ii., iii., iv.,  ",
            value: "lower-roman"
          }, {
            name: "A., B., C., D.,  ",
            value: "upper-alpha"
          }, {
            name: "I., II., III., IV.,  ",
            value: "upper-roman"
          }]
        },
        unordered: {
          text: $.i18n('toolbar_unordered_list'),
          cmd: 'insertunorderedlist',
          param: 'disc',
          classList: ['posr'],
          spanClass: ['hover'],
          iconClass: ['posa', 'hover'],
          textClass: ['ib'],
          showValue: 'showunorderedlist',
          showText: true
        },
        ordered: {
          text: $.i18n('toolbar_ordered_list'),
          cmd: 'insertorderedlist',
          param: 'decimal',
          classList: ['posr'],
          spanClass: ['hover'],
          iconClass: ['posa', 'hover'],
          textClass: ['ib'],
          showValue: 'showorderedlist',
          showText: true
        },
        fontfamily: {
          text: $.i18n('toolbar_font_family'),
          cmd: 'fontfamily',
          setText: true,
          classList: ['posr'],
          spanClass: ['fontF'],
          iconClass: ['posa', 'hover'],
          showValue: 'showfontfamilylist'
        },
        fontsize: {
          text: $.i18n('toolbar_font_size'),
          cmd: 'fontsize',
          setText: true,
          classList: ['posr'],
          spanClass: ['fontS'],
          iconClass: ['posa', 'hover'],
          showValue: 'showfontsizelist'
        },
        indent: [
          {
            text: $.i18n('toolbar_indent'),
            cmd: 'upindent'
          },
          {
            text: $.i18n('toolbar_outdent'),
            cmd: 'outdent'
          }
        ],
        forecolor: {
          cmd: 'forecolor',
          text: $.i18n('toolbar_text_color'),
          color: '#ff0000',
          classList: ['posr'],
          iconClass: ['posa', 'trangle', 'hover']
        },
        backcolor: {
          cmd: 'backcolor',
          text: $.i18n('toolbar_background_color'),
          color: '#ffff00',
          classList: ['mt05'],
          iconClass: ['posa', 'hover']
        }
      }
    },
    methods: {
      ...mapActions(['gotoReview']),
      showFontstyleList() {
        Observer.fire('showfontstylelist');
        Observer.fire('showcloth');
      }
    }
  }
</script>
